<template>
  <section class="rank-wrapper" v-if="fielsStatus === 1">
    <div class="rank-header" :inner="isInner">
      <template>
        <span v-show="fielsStatus !== 2" v-if="!isInner" class="text-time">{{timerText}}</span>
        <div class="acti_entry_timer" v-if="timerresult">
          <template v-if="dayNum > 0">
            <span class="week-time">{{timerresult.split(':')[0]}}</span>
            <span class="timer-text">天</span>
          </template>
          <template v-else>
            <span class="week-time">{{timerresult.split(':')[1]}}</span>
            <span class="week-colon">:</span>
            <span class="week-time">{{timerresult.split(':')[2]}}</span>
            <span class="week-colon">:</span>
            <span class="week-time">{{timerresult.split(':')[3]}}</span>
          </template>
        </div>
        <span v-show="fielsStatus !== 2" v-if="isInner" class="text-time">{{timerText}}</span>
      </template>
      <router-link tag="span" :to="{name: 'ActivityRank'}" class="right pointer">查看活动详情></router-link>
      <div class="middle-text" v-if="fielsStatus !==2">
        <p class="title" v-if="!isInner">排行榜</p>
        <p class="title" v-else>排行拿大奖</p>
        <span class="small-tit">活动时间 ({{timeslot}})</span>
      </div>
    </div>
    <ul class="rank-content-box">
      <li class="title li_item">
        <span class="li_item_1">排名</span>
        <span class="li_item_2">昵称</span>
        <span class="li_item_3">手机号码</span>
        <span class="li_item_4">当前消费额</span>
      </li>
      <template v-for="(item, index) in showData">
        <li :class="{'li_item' : true, 'own' : (rankActivityList.myRank && rankActivityList.myRank.rank === item.rank)}" :key="index">
          <span class="li_item_1">
            <i class="el-icon-star-on rank_item"
            :class="{'rank_item_1': item.rank === 1, 'rank_item_2': item.rank === 2, 'rank_item_3': item.rank === 3}"
            v-if="item.rank === 1 || item.rank === 2 || item.rank === 3"><em class="rank_num">{{item.rank}}</em></i>
            <template v-else>
              {{item.rank}}
            </template>
          </span>
          <span class="li_item_2">{{item.username | nicknameReplace(item.rank === myRank)}}<em v-if="item.rank === myRank">(我)</em></span>
          <span class="li_item_3">{{item.mobile | phoneReplace}}</span>
          <span class="li_item_4">¥{{item.amount | floatPrices}}</span>
        </li>
      </template>
      <li class="own li_item" v-if="rankActivityList.myRank && rankActivityList.myRank.rank > showNum">
        <span class="li_item_1">{{rankActivityList.myRank.rank}}</span>
        <span class="li_item_2">{{rankActivityList.myRank.username}}(我)</span>
        <span class="li_item_3">{{rankActivityList.myRank.mobile | phoneReplace}}</span>
        <span class="li_item_4">¥{{rankActivityList.myRank.amount | floatPrices}}</span>
      </li>
      <el-pagination
      :current-page="page.index"
      :total="showTotal"
      @current-change="pagechange"
      layout='prev, pager, next, ->'/>
    </ul>
  </section>
</template>
<script>
  import { Table, TableColumn, Pagination } from 'element-ui'
  import { countDown, phoneReplace } from '@/tool/tool'
  import { activityRank } from '@/service/get-data.js'
  export default{
    name: 'ActivityRankMonth9',
    props: {
      showNum: {
        type: Number,
        default: 5
      },
      isInner: {
        type: Boolean,
        default: false
      }
    },
    components: {
      elTable: Table,
      elTableColumn: TableColumn,
      elPagination: Pagination
    },
    computed: {
      userName () {
        return this.$store.state.user.username
      },
      userId () {
        return this.$store.state.user.id
      },
      dayNum () {
        return (this.timerresult && this.timerresult.split(':')[0]) || 0
      },
      showData () {
        return this.rankActivityList.rankDetailVOS.slice((this.page.index - 1) * this.page.size, this.page.index * this.page.size)
      },
      showTotal () {
        return (this.rankActivityList.rankDetailVOS.length >= 30 ? 30 : this.rankActivityList.rankDetailVOS.length)
      },
      timeslot () {
        if (this.rankActivityList && !this.activity.openRanks.length) { return }
        let startstr = this.rankActivityList.startTime.substr(5, 5).replace(/-/g, '/')
        let endstr = this.rankActivityList.endTime.substr(5, 11).replace(/-/g, '/')
        return `${startstr}-${endstr}`
      },
      activity () {
        return this.$store.state.activity.activityRank || {}
      },
      myRank () {
        return (this.rankActivityList.myRank && this.rankActivityList.myRank.rank) || -1
      }
    },
    data () {
      return {
        globalTimer: null, // 计时器
        timerresult: '',
        timerText: '',
        fielsStatus: 0, // 活动状态
        rankActivityList: {},
        page: {
          index: 1,
          size: 10
        }
        // activity: {'openRanks': [], 'overRanks': [{'startTime': '2018-11-22 15: 52: 32', 'endTime': '2018-11-22 22: 52: 44', 'payEndTime': '2018-11-22 23: 52: 52', 'rankDetailVOS': [{'rank': 1, 'amount': 2000, 'mobile': '15757185394', 'username': 'allan'}], 'myRank': {'rank': 2, 'amount': 3000, 'mobile': '15757185394', 'username': '楼天锡'}}]}
      }
    },
    methods: {
      // 分页点击事件
      pagechange (index) {
        this.page.index = index
      },
      // 活动排名
      async fetchActivityRank () {
        let res = await activityRank(this.userId || undefined, 30)
        if (res.data.resultCode && res.data.resultCode === 2000) {
          this.$store.commit('ACTRANK', res.data.data)
          // if (res.data.data.openRanks && !res.data.data.openRanks.length) {
          // }
        } else {
          this.$message({
            message: res.data.resultMsg,
            type: 'wraming'
          })
        }
      },
      hanleTimer () {
        if (!('openRanks' in this.activity)) { return }
        // 活动已结束
        if (this.activity.openRanks && !this.activity.openRanks.length) {
          this.rankActivityList = this.activity.overRanks[this.activity.overRanks.length - 1]
          // this.ownRankList = this.activity.overRanks[0].myRank
          clearTimeout(this.globalTimer)
          this.fielsStatus = 2
          this.timerresult = ''
          this.timerText = ''
          return
        }
        this.rankActivityList = this.activity.openRanks[0] || {}
        if (!('endTime' in this.rankActivityList)) { return }
        // 样式
        let startTimeParm = this.rankActivityList.startTime
        let endTimeParm = this.rankActivityList.endTime
        const starTimeStamp = (new Date(startTimeParm.replace(/-/g, '/'))).getTime()
        const endTimeStamp = (new Date(endTimeParm.replace(/-/g, '/'))).getTime()
        let nowTime = (new Date()).getTime()
        // 周周活动开始
        if (nowTime > starTimeStamp && nowTime <= endTimeStamp) {
          this.timerText = '距结束'
          this.fielsStatus = 1
          this.startCountFn(endTimeParm)
          return
        }
        // 周周活动还未开始
        if (nowTime < starTimeStamp) {
          this.timerText = '距开始'
          this.fielsStatus = 0
          this.startCountFn(startTimeParm)
        }
        // 周周活动结束
        if (nowTime > endTimeStamp) {
          this.timerText = '本场活动结束'
          this.fielsStatus = 2
        }
      },
      // 倒计时 2018-09-10 2018-09-30
      startCountFn (timeParm) {
        let vm = this
        clearInterval(vm.globalTimer)
        vm.globalTimer = null
        vm.globalTimer = setInterval(function () {
          vm.timerresult = countDown(timeParm)
          // 剩余时间<=0
          if (vm.timerresult + '' === 'false') {
            clearInterval(vm.globalTimer)
            vm.globalTimer = null
            setTimeout(() => {
              vm.hanleTimer()
            }, 800)
          }
        }, 1000)
      }
    },
    mounted () {
      this.hanleTimer()
      this.fetchActivityRank()
    },
    filters: {
      phoneReplace (value) {
        return phoneReplace(value)
      },
      nicknameReplace (value, isMe) {
        if (isMe || (value && value.length === 1)) { return value }
        let len = value.length
        let hiddenStr = value.substring(2, len)
        if (len === 2) {
          return value.replace(/.{0,1}$/, '*')
        } else if (len > 2) {
          return value.replace(hiddenStr, '****')
        }
      }
    },
    watch: {
      activity: {
        deep: true,
        handler (value, old) {
          this.hanleTimer()
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
.rank-wrapper{
  margin-bottom: 30px;
  .rank-header{
    height: 70px;
    line-height: 70px;
    background:rgba(227,57,57,1);
    border-radius:10px 10px 0px 0px;
    color: #ffffff;
    padding: 0 25px 0 36px;
  }
}
.rank-header{
  position: relative;
  // 倒计时
  .text-time{
    float: left;
    margin-right: 10px;
  }
  .acti_entry_timer{
    display:inline-block;
    float: left;
    // position: absolute;
    margin-top: 16px;
    line-height: 30px;
    .timer-text{
      color:#fff;
      // line-height:53px;
      font-size:28px;
      vertical-align: middle;
    }
    .week-time{
      font-family: PingFangSC-Semibold, Microsoft YaHei;
      font-weight: 600;
      background: #ffffff;
      border-radius: 4px;
      width: 42px;
      height: 35px;
      display: inline-block;
      vertical-align: middle;
      color: #000;
      font-size: 20px;
      line-height: 35px;
      text-align: center;
      letter-spacing: 2px;
    }
    .week-colon {
      font-size: 20px;
      line-height: 40px;
      vertical-align: middle;
      display: inline-block;
    }
  }
  .middle-text{
    width: 40%;
    margin: 0 30%;
    padding: 10px 0;
    text-align: center;
    line-height: 20px;
  }
  .title{
    font-size: 20px;
    line-height: 28px;
  }
  .small-tit{
    display: inline-block;
    color: #FFBEBE;
    font-size: 14px;
    line-height: 20px;
  }
  &[inner]{
    border-radius: 20px 20px 0 0;
    .text-time{
      float: right;
    }
    .acti_entry_timer{
      float: right;
    }
    .middle-text{
      position: absolute;
      left: 0;
      margin: 0 3%;
      text-align: left;
      line-height: 20px;
    }
    .right{
      display: none;
    }
  }
}
.rank-content-box{
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding: 0 11px;
  .el-pagination{
    background-color: #fff;
  }
  &:before{
    position: absolute;
    content: '';
    left: 0;
    border-top: 10px solid #C11A1A;
    border-left: 6px solid transparent;
    border-right: 6px solid #C11A1A;
    border-bottom: 10px solid transparent;
    width: 0;
    height: 0;
  }
  &:after{
    position: absolute;
    top: 0;
    right: 0;
    content: '';
    border-top: 10px solid #C11A1A;
    border-left: 6px solid #C11A1A;
    border-right: 5px solid transparent;
    border-bottom: 10px solid transparent;
    width: 0;
    height: 0;
  }
  ul{
    padding: 0;
  }
  .li_item{
    line-height: 50px;
    font-size:16px;
    background: #FFFFFF;
    box-shadow: 0px 1px 0px 0px inset rgba(213,213,213,0.5);
    &_1{
      width: 9.68%;
      text-align: center;
      display: inline-block;
      vertical-align: middle;
      height: 50px;
    }
    &_2{
      display: inline-block;
      padding-left: 17.52%;
      padding-right: 0.83%;
      width: 23.78%;
    }
    &_3{
      display: inline-block;
      width: 24.37%;
    }
    &_4{
      display: inline-block;
      width: 10%;
      text-align: right;
    }
  }
  .rank_item{
    font-size: 40px;
    width: 50px;
    position: relative;
    padding-top: 5px;
    &_1{
      color:#DA1F1F;
    }
    &_2{
      color: #FD7615;
    }
    &_3{
      color: #FFC300;
    }
  }
  .rank_num{
    position: absolute;
    color: #fff;
    font-size: 18px;
    top: 42%;
    left: 39%;
  }
  .title{
    font-size:18px;
    color:rgba(32,32,32,1);
    background:rgba(246,246,246,1);
    span{
      font-weight: 600;
    }
  }
  .own{
    background: #FFF9D4;
  }
}
</style>
